html,
body {
  min-width: 1366px;
  height: 100%;
  font-family: $font-family;
  font-size: $font-size-root;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px
}

::-webkit-scrollbar-button {
  display: none
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #cfcfcf
}

::-webkit-scrollbar-track {
  width: 7px;
  height: 7px
}

::-webkit-scrollbar-track-piece {
  background: transparent
}

a {
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

p {
  color: #333;
  line-height: 22px;
}

ins {
  text-decoration: none;
}

textarea {
  resize: none;
}

.align-l {
  text-align: left;
}

.align-c {
  text-align: center;
}

.align-r {
  text-align: right;
}

.chart-tooltip-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.box {
  display: flex;
  align-items: center;
}

.box-1 {
  flex: 1;
}

.flex {
  display: flex;

  &.flex-column {
    flex-direction: column;
    height: 100%;
    flex-wrap: nowrap;

    &>.vma-block-body {
      height: 100%;
    }
  }

  &.center {
    justify-items: center;
    align-items: center;
  }

  &.center-h {
    justify-items: center;
  }

  &.center-v {
    align-items: center;
  }

  &.center-s {
    align-items: stretch;
  }

  &.center-start {
    align-items: start;
  }

  &.justify-sb {
    justify-content: space-between;
    align-items: center;
  }

  .flex-1,
  .flex-2 {
    overflow: auto;
    max-width: 100%;

    &.ellipse {
      overflow: hidden;
    }
  }

  .flex-1 {
    flex: 1;
  }

  .flex-2 {
    flex: 2;
  }

  .flex-r {
    margin-left: auto;
  }

  .flex-l {
    margin-right: auto;
  }
}

.ant-avatar {
  background: $theme-primary;
}

.pointer {
  cursor: pointer;
}

.layout {
  height: 100%;
  background: #f0f2f5;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.clearfix,
.clear {
  @extend %clearfix;
}

.ellipse {
  @extend %ellipse;
}

.inline-block {
  display: inline-block;
}

.c-gray {
  color: #999 !important;
}

.c-blue {
  color: #02A7F0;
}

$size-map: (f20: rem(-10px), f15: rem(-10px), f10: rem(-10px), f5: rem(-5px), 0: rem(0px), 5: rem(5px), 10: rem(10px), 15: rem(15px), 20: rem(20px), 25: rem(25px), 30: rem(30px), 40: rem(40px), 100: rem(100px));

@each $name in map-keys($size-map) {
  $value: map-get($size-map, $name);

  .mt-#{$name} {
    margin-top: $value;
  }

  .mr-#{$name} {
    margin-right: $value;
  }

  .mb-#{$name} {
    margin-bottom: $value;
  }

  .ml-#{$name} {
    margin-left: $value;
  }

  .margin-#{$name} {
    margin: $value;
  }

  .margin-h-#{$name} {
    margin-left: $value;
    margin-right: $value;
  }

  .margin-v-#{$name} {
    margin-top: $value;
    margin-bottom: $value;
  }

  .pt-#{$name} {
    padding-top: $value;
  }

  .pr-#{$name} {
    padding-right: $value;
  }

  .pb-#{$name} {
    padding-bottom: $value;
  }

  .pl-#{$name} {
    padding-left: $value;
  }

  .padding-#{$name} {
    padding: $value;
  }

  .padding-h-#{$name} {
    padding-left: $value;
    padding-right: $value;
  }

  .padding-v-#{$name} {
    padding-top: $value;
    padding-bottom: $value;
  }
}

@each $name in map-keys($theme-map) {
  .c-#{$name} {
    color: map-get($theme-map, $name) !important;
  }
}

.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-22 {
  font-size: 22px;
}

.fs-24 {
  font-size: 24px;
}